<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>心碎的故事 - 被灿宏伤害的她</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        font-family: "Microsoft YaHei", sans-serif;
        overflow: hidden;
        height: 100vh;
      }

      .story-container {
        position: relative;
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .narrator {
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translateX(-50%);
        color: white;
        font-size: 1.2em;
        text-align: center;
        max-width: 600px;
        opacity: 0;
        animation: fadeIn 2s ease-in forwards;
      }

      .scene {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 2s ease-in-out;
      }

      .scene.active {
        opacity: 1;
      }

      .heart {
        position: absolute;
        width: 50px;
        height: 50px;
        background: #ff4757;
        transform: rotate(45deg);
        animation: heartbeat 1.5s ease-in-out infinite;
      }

      .heart::before,
      .heart::after {
        content: "";
        position: absolute;
        width: 50px;
        height: 50px;
        background: #ff4757;
        border-radius: 50%;
      }

      .heart::before {
        top: -25px;
        left: 0;
      }

      .heart::after {
        left: -25px;
        top: 0;
      }

      .broken-heart {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 100px;
        color: #ff4757;
        animation: breakHeart 3s ease-in-out;
      }

      .text-box {
        position: absolute;
        bottom: 20%;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.7);
        padding: 20px;
        border-radius: 10px;
        color: white;
        max-width: 500px;
        text-align: center;
        opacity: 0;
        animation: slideUp 2s ease-in-out forwards;
      }

      .rain {
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(transparent, rgba(255, 255, 255, 0.1));
        animation: rain 2s linear infinite;
      }

      @keyframes fadeIn {
        to {
          opacity: 1;
        }
      }

      @keyframes heartbeat {
        0% {
          transform: rotate(45deg) scale(1);
        }
        50% {
          transform: rotate(45deg) scale(1.1);
        }
        100% {
          transform: rotate(45deg) scale(1);
        }
      }

      @keyframes breakHeart {
        0% {
          transform: translate(-50%, -50%) scale(1);
          opacity: 1;
        }
        50% {
          transform: translate(-50%, -50%) scale(1.2);
          opacity: 0.8;
        }
        100% {
          transform: translate(-50%, -50%) scale(0.5) rotate(45deg);
          opacity: 0.3;
        }
      }

      @keyframes slideUp {
        from {
          opacity: 0;
          transform: translateX(-50%) translateY(50px);
        }
        to {
          opacity: 1;
          transform: translateX(-50%) translateY(0);
        }
      }

      @keyframes rain {
        to {
          transform: translateY(100vh);
        }
      }

      .timeline {
        position: absolute;
        top: 10px;
        right: 20px;
        color: white;
        font-size: 14px;
      }

      .progress-bar {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 300px;
        height: 4px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 2px;
        overflow: hidden;
      }

      .progress {
        height: 100%;
        background: white;
        width: 0%;
        transition: width 0.3s ease;
      }
    </style>
  </head>
  <body>
    <div class="story-container">
      <!-- 场景1：初识 -->
      <div class="scene active" id="scene1">
        <div class="narrator">
          <h2>❤️ 初识灿宏</h2>
          <p>那天阳光正好，我遇见了他...</p>
        </div>
        <div class="heart" style="top: 30%; left: 20%"></div>
        <div class="heart" style="top: 60%; right: 25%"></div>
      </div>

      <!-- 场景2：甜蜜 -->
      <div class="scene" id="scene2">
        <div class="narrator">
          <h2>💝 甜蜜时光</h2>
          <p>他给了我所有承诺，说会永远爱我...</p>
        </div>
        <div class="heart" style="top: 40%; left: 50%"></div>
        <div class="heart" style="top: 50%; left: 45%"></div>
        <div class="heart" style="top: 45%; left: 55%"></div>
      </div>

      <!-- 场景3：背叛 -->
      <div class="scene" id="scene3">
        <div class="rain"></div>
        <div class="narrator">
          <h2>💔 真相揭露</h2>
          <p>直到那天，我发现他一直在骗我...</p>
        </div>
        <div class="broken-heart">💔</div>
      </div>

      <!-- 场景4：伤害 -->
      <div class="scene" id="scene4">
        <div class="text-box">
          <h3>灿宏的背叛</h3>
          <p>他不仅有了别的女人，还骗走了我所有的积蓄...</p>
          <p>那些甜言蜜语，不过是精心编织的谎言。</p>
          <p>我的心，碎了一地。</p>
        </div>
      </div>

      <!-- 场景5：觉醒 -->
      <div class="scene" id="scene5">
        <div class="narrator">
          <h2>🌅 重新站起</h2>
          <p>但我不恨他，因为他让我看清了什么是真爱...</p>
        </div>
      </div>

      <div class="timeline">
        <span id="currentTime">00:00</span> / <span id="totalTime">02:30</span>
      </div>

      <div class="progress-bar">
        <div class="progress" id="progress"></div>
      </div>
    </div>

    <script>
      // 故事场景控制
      const scenes = document.querySelectorAll(".scene");
      const progress = document.getElementById("progress");
      const currentTime = document.getElementById("currentTime");
      let currentScene = 0;
      const sceneDuration = 1000; // 每个场景30秒
      const totalDuration = scenes.length * sceneDuration;

      function showScene(index) {
        scenes.forEach((scene, i) => {
          scene.classList.toggle("active", i === index);
        });
      }

      function updateProgress() {
        const elapsed = currentScene * sceneDuration;
        const percentage = (elapsed / totalDuration) * 100;
        progress.style.width = percentage + "%";

        const minutes = Math.floor(elapsed / 60000);
        const seconds = Math.floor((elapsed % 60000) / 1000);
        currentTime.textContent = `${minutes
          .toString()
          .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
      }

      function nextScene() {
        currentScene = (currentScene + 1) % scenes.length;
        showScene(currentScene);
        updateProgress();
      }

      // 自动播放场景
      setInterval(nextScene, sceneDuration);

      // 初始化
      showScene(0);
      updateProgress();

      // 添加背景音乐
      const audioContext = new (window.AudioContext ||
        window.webkitAudioContext)();

      function createHeartbreakMelody() {
        const oscillator = audioContext.createOscillator();
        const gainNode = audioContext.createGain();

        oscillator.connect(gainNode);
        gainNode.connect(audioContext.destination);

        oscillator.frequency.setValueAtTime(220, audioContext.currentTime); // A3
        oscillator.type = "sine";

        gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
        gainNode.gain.exponentialRampToValueAtTime(
          0.01,
          audioContext.currentTime + 2
        );

        oscillator.start(audioContext.currentTime);
        oscillator.stop(audioContext.currentTime + 2);
      }

      // 点击开始音乐
      document.addEventListener(
        "click",
        () => {
          if (audioContext.state === "suspended") {
            audioContext.resume();
          }
          createHeartbreakMelody();
        },
        { once: true }
      );

      // 键盘控制
      document.addEventListener("keydown", (e) => {
        if (e.key === "ArrowRight") nextScene();
        if (e.key === "ArrowLeft") {
          currentScene = Math.max(0, currentScene - 1);
          showScene(currentScene);
          updateProgress();
        }
      });
    </script>
  </body>
</html>
